<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="css/video.css"/>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<title></title>
</head>
<body>
	<div id="logincover">
		<div class="login-inter">
			<img src="./img/关闭.png" id="clo">
			<a href="login.html">去注册</a>
			<div class="row">
				<div class="cur" id="col">短信登录</div>
				<div id="col">密码登陆</div>
				<div id="col">SIM登录</div>
			</div>
			<div id="hint">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>手机号格式不正确</span>
				<span>手机号可用</span>
			</div>
			<div id="phon">
			<input placeholder="手机号">
			<div class="row">
				<div class="col-7">
					<input placeholder="请输入验证码"/>
				</div>
				<div class="col-5">
					<p>获取验证码</p>
				</div>
			</div>
			<p>登录</p>
			</div>
			<div id="pwd">
				<input placeholder="手机号/邮箱/用户名">
				<input placeholder="密码">
				<div id="sign">
						<div class="col">
							<input type="checkbox"/>
							<span>自动登录</span>
						</div>
						<div class="col">
							<span>忘记密码</span>
							<span>|</span>
							<a href="login.html">注册</a>
						</div>
				</div>
				<div id="tisi">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>密码长度在5~12位</span>
				<span>密码长度符合</span>
				</div>
				<p>登录</p>
				<span>手机号或密码不正确</span>
			</div>
			<div id="SIM">
				<input placeholder="手机号">
				<p>登录</p>
				<span>温馨提示：</span>
				<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
				<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
			</div>
			<div class="text">
				登录即同意<span>《咪咕用户服务协议》</span>
				和<span>《咪咕隐私权政策》</span>
			</div>
		</div>
	</div>
	<!-- 一楼 -->
	<div class="thead">
	<div class="f1">
		<div class="container">
			<div class="row">
				<div class="col-1">
					<img src="./img/220217160554572_90x26_3214.png" >
				</div>
				<div class="col-7">
					<ul>
						<li><a href="">音乐</a></li>
						<li><a href="">现场</a></li>
						<li>
							<img src="./img/皇冠.png">
							<a href="">会员中心</a>
						</li>
						<li><a href="">凡响计划</a></li>
						<li><a href="">客户端下载</a></li>
					</ul>
				</div>
				<div class="col-4">
					<input placeholder="搜索歌曲、歌手、MV">
					<div>
						<img src="./img/no-login.png" >
						<div class="log_popup">
							<p><span>一</span>登录后可专享<span>一</span></p>
							<div class="row">
								<div class="col-4">
									<img src="./img/乐谱编辑.png">
									<p>试听记录同步</p>
								</div>
								<div class="col-4">
									<img src="./img/彩铃.png">
									<p>订购酷炫铃音</p>
								</div>
								<div class="col-4">
									<img src="./img/无损音质.png">
									<p>下载无损音乐</p>
								</div>
							</div>
							<div class="row">
								<div class="col-6">
									<span class="lgin">登陆</span>
									</div>
								<div class="col-6">
									<span><a href="login.html">注册</a></span>
									</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 二楼 -->
	<div class="f2">
		<div class="container">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="playlist.html">歌单</a></li>
				<li><a href="special-issue.html">专辑</a></li>
				<li><a href="hot.html">榜单</a></li>
				<li><a href="singer.html">歌手</a></li>
				<li><a href="crbt.html">彩铃</a></li>
				<li><a href="hardware.html">咪咕周边</a></li>
			</ul>
			<ul class="cur">
				<li><a href="#">首页</a></li>
				<li><a href="#">演唱会</a></li>
				<li><a href="#">独家放送</a></li>
				<li><a href="#">MV</a></li>
			</ul>
		</div>
	</div>
	</div>
	<!-- 三楼 -->
	<div class="f3">
		<div class="container">
			<div class="row">
				<div class="col-10">
					<div class="video_box">
						<span>进入放映间</span>
					<p>全力以赴向冰雪-冰雪主题交响乐展演</p>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
					<div class="img_box">
						<img src="./img/220218172538499_1005x546_934.jpg" >
					</div>
					<p>全力以赴向冰雪-冰雪主题交响乐</p>
					</div>
					<div class="box">
					<div class="img_box">
						<img src="./img/220217173627884_1005x546_8616.jpg" >
					</div>
					<p>全力以赴向冰雪-来信请回答冰雪特</p>
					</div>
					<div class="box">
					<div class="img_box">
						<img src="./img/21111415441561_1005x546_7358.jpg" >
					</div>
					<p>大型纪录片《紫禁城》第八支MV《</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 四楼 -->
	<div class="f4">
		<div class="container">
			
		</div>
	</div>
	<!-- 五楼 -->
	<div class="f5">
		<div class="container"></div>
	</div>
	<!-- 六楼 -->
	<div class="f6">
		<div class="container"></div>
	</div>
	<!-- 七楼 -->
	<div class="f7">
		<div class="container"></div>
	</div>
	<!-- 八楼 -->
	<div class="f8">
		<div class="container"></div>
	</div>
	<!-- 九楼 -->
	<div class="f9">
		<div class="container"></div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
	$('.thead').on('mouseover','a',function(){
			if($(this).text()=='音乐'){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
			}
			if($(this).text()=='现场'){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
			}
		})
		$('.thead').mouseleave(function(){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
		})
		// 登陆
		$('.f1 .container>.row>.col-4>div').mouseover(function(){
			$('.f1 .log_popup').stop(true).show(300)
		})
		$('.f1 .container>.row>.col-4>div').mouseleave(function(){
			$('.f1 .log_popup').stop(true).hide(300)
		})
		const lgin=document.querySelector('.lgin')
		lgin.onclick=()=>{
			logincover.style=`display: flex;`
		}
		clo.onclick=()=>{
			logincover.style=`display: none;`
		}
		$('.f1 .container>.row>.col-4>div').mouseover(function(){
			$('.f1 .log_popup').stop(true).show(300)
		})
		$('.f1 .container>.row>.col-4>div').mouseleave(function(){
			$('.f1 .log_popup').stop(true).hide(300)
		})
		$('.login-inter>div>input:first-child').on('input',function(){
				if($(this).val()==''){
					$('#hint').prop('class','')
					return
				}
			if(/^1[3-9]\d{9}$/.test($(this).val())){
				$('#hint').prop('class','ok')
			}else{
				$('#hint').prop('class','err')
			}
		})
		$('.login-inter>div>input:first-child').blur(function(){
			$('#hint').prop('class','')
		})
		$('#pwd>input:nth-of-type(2)').on('input',function(){
			const l=$(this).val()
			if(l==''){
				$('#tisi').prop('class','')
				return
			}
			if(l.length>12 || l.length<5){
				$('#tisi').prop('class','err')
			}else{
				$('#tisi').prop('class','ok')
			}
		})
		$('#pwd>input:nth-of-type(2)').blur(function(){
			$('#tisi').prop('class','')
		})
		// $('#pwd>p').click(function(){
		// 	let p=$('#pwd>input:first-child').val()
		// 	let w=$('#pwd>input:nth-of-type(2)').val()
		// 	let xhr=new XMLHttpRequest()
		// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
		// 	xhr.send()
		// 	xhr.onload=()=>{
		// 		console.log(xhr.responseText)
		// 		if(xhr.responseText=='err'){
		// 			$('#pwd>span').prop('class','err')
		// 		}
		// 	}
		// })
		$('.login-inter>.row').on('click','div',function(){
			$(this).addClass('cur').siblings().removeClass('cur')
			if($(this).text()=='短信登录'){
				phon.style.display=''
				pwd.style.display='none'
				SIM.style.display='none'
			}
			if($(this).text()=='密码登陆'){
				phon.style.display='none'
				pwd.style.display='block'
				SIM.style.display='none'
			}
			if($(this).text()=='SIM登录'){
				phon.style.display='none'
				pwd.style.display='none'
				SIM.style.display='block'
			}
		})
	</script>
</body>
</html>